<template>
  <div class="fm">
    <div class="top">
      <el-input style="width: 150pt;border: black solid 1px" placeholder="请输入搜索内容" v-model="input" clearable></el-input>
      <el-button type="primary" icon="el-icon-search"  @click="handleSearch">搜索</el-button>
      <el-button type="primary" @click="openAddForm()">新增</el-button>
    </div>
    <el-table
        :data="tableData"
        :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"

        border
        style="width: 100%;">
      <el-table-column
          prop="id"
          label="id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="music"
          label="文件">
<!--        <template slot-scope="scope">-->
<!--          <a :href="scope.row.music" target="_blank" class="buttonText">{{scope.row.music}}</a>-->
<!--        </template>-->

        <template slot-scope="scope">
          <h1>播放本地音频</h1>
          <audio controls>
            <source :src="scope.row.music" type="audio/mp3" />
            Your browser does not support the audio element.
          </audio>
        </template>
      </el-table-column>
      <el-table-column
          prop="picture"
          label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.picture" alt="图片描述" style="width: 100pt" height="100pt">
        </template>
      </el-table-column>
      <el-table-column
          prop="change"
          label="操作">
        <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" @click="openEditForm(scope.row)">编辑</el-button>
        <el-button type="danger" icon="el-icon-edit" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--编辑-->
    <el-dialog :visible.sync="showEditForm" title="编辑表单">
      <el-form :model="editingRow">
        <el-form-item label="id">
          <el-input v-model="editingRow.id"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editingRow.name"></el-input>
        </el-form-item>
        <el-form-item label="文件">
          <el-input v-model="editingRow.music"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-input v-model="editingRow.picture"></el-input>
        </el-form-item>

      </el-form>
      <template #footer>
        <el-button @click="showEditForm = false">取消</el-button>
        <el-button type="primary" @click="edit">确定</el-button>
      </template>
    </el-dialog>

<!--添加-->
    <el-dialog :visible.sync="showAddForm" title="添加表单">
      <el-form  :model="editingRow" ref="formRef" >

        <el-form-item label="名称">
          <el-input v-model="editingRow.name"></el-input>
        </el-form-item>
        <el-form-item label="文件">
          <input type="file" id="audioFileInput" accept="audio/*" @change="handleFileChange" />
        </el-form-item>
        <el-form-item label="图片">
          <!--图片上传-->
          <el-upload
              ref="uploadRef"
              action="http://localhost:8080/fm/upload"
              list-type="picture-card"
              :auto-upload="true"
              :limit=1
              :on-success="uploadImg"
              name="file"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
        <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>

          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

      </el-form>
      <template #footer>
        <el-button @click="showAddForm = false">取消</el-button>
        <el-button  type="primary" @click="save">确定</el-button>
      </template>
    </el-dialog>

    <div class="bottom">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total0"
          :page-size=pageSize
          v-model="currentPage"
          @current-change="handlePageChange">

">
      </el-pagination>
    </div>

  </div>

</template>



<script>
import axios from "axios";

export default {
  name: "FM",
  data() {
    return {
      //音频
      fileName: null,



      total0:10,
      tableData:[],
      input: '',
      showEditForm: false,
      showAddForm: false,
      editingRow: {},
      currentPage: 1,
      pageSize: 2,


      // 图片上传
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,

    }
  }
  ,
  mounted() {
    this.totalPage()
    this.handlePageChange(this.currentPage, this.pageSize)

  },

  methods: {
    clean(){
      this.dialogImageUrl='';
    },

    // 音频上传
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {

        this.editingRow.music=this.fileName
        // 这里可以处理文件上传
        // 例如使用 Fetch API 上传文件
        const formData = new FormData();
        formData.append('file', file);

        fetch('http://localhost:8080/fm/upload', {
          method: 'POST',
          body: formData,
        })
            .then(response => response.json())
            .then(data => {
              console.log("resp.data"+data.data)
              this.editingRow.music=data.data
              console.log('文件上传成功:', data);
            })
            .catch(error => {
              console.error('文件上传失败:', error);
            });
      }
    },


    //
    uploadImg(r) {
      this.editingRow.picture=r.data
      console.log(this.editingRow.picture)
    },

    // 图片上传
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },


    // 模糊查询
    handleSearch(){
      axios.get('/fm/selectLikeName',
          {
            params:{
              name:this.input
            }
          }).then(resp => {
        console.log(resp.data);
        this.tableData = resp.data.data;
      })
    },
    totalPage(){
      axios.get('/fm/totalPage').then(resp => {
        console.log("axios resp.data="+resp.data.data);
        this.total0 = resp.data.data;
      })
    },

    handlePageChange(newPage) {
      // 根据新页码进行数据加载或其他操作
      console.log(`当前页码变为：${newPage}`);
    // 分页查询
      axios.get('/fm/selectAllByPage',
          {
            params:{
              page:(newPage-1)*this.pageSize,
              size:this.pageSize
            }
          }).then(resp => {
        console.log(resp.data);
        this.tableData = resp.data.data;
      })
    },

    openEditForm(row){
      this.editingRow = {...row };
      this.showEditForm = true;
    },
    openAddForm(){
      this.showAddForm = true;
    },

    // 编辑

    edit() {
      axios.get('/fm/update',
          {
            params:{
              id:this.editingRow.id,
              name:this.editingRow.name,
              music:this.editingRow.music,
              picture:this.editingRow.picture
            }
          })
          .then(response => {
            // 更新本地数据
            const index = this.tableData.findIndex(item => item.id === this.editingRow.id);
            if (index!== -1) {
              this.tableData[index] = {...this.editingRow };
            }
            this.showEditForm = false;
            this.myMethod();
          })
          .catch(error => {
            console.error('修改失败', error);
          })
    },

    // 保存
     save() {
      // 发送后端请求
       axios.get('/fm/insert',
          {
            params:{
              id:this.editingRow.id,
              name:this.editingRow.name,
              music:"http://localhost:8080/fm/down?filename="+this.editingRow.music,
              picture:"http://localhost:8080/fm/down?filename="+this.editingRow.picture
            }
          })
          .then(response => {
            // 更新本地数据
            const index = this.tableData.findIndex(item => item.id === this.editingRow.id);
            if (index!== -1) {
              this.tableData[index] = {...this.editingRow };
            }
            this.showAddForm = false;

            this.$refs['uploadRef'].clearFiles();
            this.editingRow = { name: '', music: '', picture: '' };
            this.clean()


            this.myMethod();
          })
          .catch(error => {
            console.error('修改失败', error);
          });

      this.myMethod();
    },
    handleDelete(row) {
      this.editingRow = {...row };
      // 在这里实现编辑逻辑
      axios.get('/fm/delete',
          {
            params:{
              id:this.editingRow.id,
            }
          }).then(response => {
            this.myMethod();
      })
          .catch(error => {
            console.error('修改失败', error);
          });

    },
    myMethod() {
      // 这里是要在页面加载时执行的方法逻辑
      this.axios.get("/fm/selectAll").then(resp => {
        console.log(resp.data);
        this.tableData = resp.data.data;
      })
    }
  }
}
</script>


<style scoped>


.fm{
  display: flex;
  flex-direction: column;
}
button{
  margin: 0 20pt 20pt 20pt;
}
.top{
  margin-bottom: 30pt;
}
.bottom{
  margin-top: 50pt;
}

</style>